<%--
    Copyright 2010 mazhao.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    under the License.
    
    Document   : order
    Created on : Oct 26, 2010, 12:36:03 AM
    Author     : mazhao
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><s:text name="order.html.title"/></title>
    <script type="text/javascript">
        $(document).ready(function() {
            $("table#orderTable tbody tr").mousedown(function() {
                $("tr.selected").removeClass("selected");
                $(this).addClass("selected");
                var orderId = $(this).children(":nth-child(1)").text();
                loadOrderItems(orderId);
            });
        });

        function loadOrderItems(orderId) {
            $.post("<%= request.getContextPath()%>/customer/onthefly/listorderitems.action",
            {"orderId": orderId},
                    loadOrderItemsImpl,
                    "json");
        }

        function loadOrderItemsImpl(data) {
            //{"orderId":6,"orderItems":[{"catalog":"Canon","count":1,"id":8,"name":"Eos 5D Mark II","operationType":"update","specialPrice":200000},{"catalog":"Canon","count":1,"id":9,"name":"Eos 7D","operationType":"update","specialPrice":150000}]}
            $("table tbody#orderItemTbody").remove();
            var strTbody = "<tbody id='orderItemTbody'>";
            for (var i = 0; i < data.orderItems.length; i++) {
                strTbody += "<tr>";
                strTbody += "<td>" + data.orderItems[i].id + "</td>";
                strTbody += "<td>" + data.orderItems[i].catalog + "</td>";
                strTbody += "<td>" + data.orderItems[i].name + "</td>";
                strTbody += "<td>" + data.orderItems[i].specialPrice + "</td>";
                strTbody += "<td>" + data.orderItems[i].count + "</td>";
                strTbody += "</tr>";
            }
            strTbody += "</tbody>";

            $("table#orderItemTable").append(strTbody);
        }

        function changeStatus(orderId, from, to) {
            $.log("begin chagne status for " + orderId + " from " + from + " to " + to )
            $.post("<%= request.getContextPath()%>/customer/onthefly/changestatus.action",
                    {"orderId": orderId, "formerStatus": from, "status": to},
                    changeStatusSuccess,
                    "json");
            $.log("change status success");
        }
        function changeStatusSuccess(data) {
            $.log("status chaged successfully, refresh form now.");
            document.location = "<%=request.getContextPath()%>/customer/showorder.action"
        }

    </script>
</head>
<body>
<h1><s:text name="order.title"/> </h1>
<table id="orderTable" style="border: solid #BDD2FF" class="alt">
    <thead style="background: #BDD2FF">
    <tr>
        <td><s:text name="order.id"/></td>
        <td><s:text name="order.postcode"/></td>
        <td><s:text name="order.province"/></td>
        <td><s:text name="order.city"/></td>
        <td><s:text name="order.address"/></td>
        <td><s:text name="order.name"/></td>
        <td><s:text name="order.phone"/></td>
        <td><s:text name="order.cell_phone"/></td>
        <td><s:text name="order.email"/></td>
        <td><s:text name="order.ctime"/></td>
        <td><s:text name="order.status"/></td>
    </tr>
    </thead>
    <tbody>
    <s:iterator value="orders" var="order">
        <tr>
            <td><s:property value="id"/></td>
            <td><s:property value="postCode"/></td>
            <td><s:property value="province"/></td>
            <td><s:property value="city"/></td>
            <td><s:property value="address"/></td>
            <td><s:property value="name"/></td>
            <td><s:property value="phone"/></td>
            <td><s:property value="cellPhone"/></td>
            <td><s:property value="email"/></td>
            <td><s:property value="createTime"/></td>
            <td>
                <s:if test="status == 10">
                    <s:text name="order.status.new"/>
                    <button class="alt" onclick="changeStatus(<s:property value="id"/>, 10, 50)">
                        <s:text name="order.status.new2cancel"/>
                    </button>
                </s:if>
                <s:elseif test="status == 20">
                    <s:text name="order.status.send"/>
                    <button class="alt" onclick="changeStatus(<s:property value="id"/>, 20, 30)">
                        <s:text name="order.status.sent2finished"/>
                    </button>
                </s:elseif>
                <s:elseif test="status == 30">
                    <s:text name="order.status.finished"/>
                </s:elseif>
                <s:elseif test="status == 40">
                    <s:text name="order.status.pending"/>
                    <buttonclass="alt" onclick="changeStatus(<s:property value="id"/>, 40, 50)">
                        <s:text name="order.status.pending2cancel"/>
                    </button>
                </s:elseif>
                <s:elseif test="status == 50">
                    <s:text name="order.status.canceled"/>
                </s:elseif>
                <s:else>ERROR:<s:property value="status"/></s:else>
            </td>
        </tr>
    </s:iterator>
    </tbody>
</table>

<table id="orderItemTable" style="border: solid #BDD2FF" class="alt">
    <thead style="background: #BDD2FF">
    <tr>
        <td><s:text name="order.item.id"/></td>
        <td><s:text name="order.item.catalog"/></td>
        <td><s:text name="order.item.name"/></td>
        <td><s:text name="order.item.special_price"/></td>
        <td><s:text name="order.item.count"/></td>
    </tr>
    </thead>

</table>
</body>
</html>
